<template>
  <div class="basic-info-form">
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="项目编码" prop="projectCode">
          <el-input
            v-model="form.projectCode"
            placeholder="请输入项目编码"
            :disabled="form.projectId != null"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="项目名称" prop="projectName">
          <el-input v-model="form.projectName" placeholder="请输入项目名称" />
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="所属公司" prop="companyId">
          <company-select
            v-model="form.companyId"
            placeholder="请选择所属公司"
            @company-change="handleCompanyChange"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="器具货主" prop="containerOwnerId">
          <company-select
            v-model="form.containerOwnerId"
            placeholder="请选择器具货主"
            @company-change="handleContainerOwnerChange"
          />
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-row :gutter="20">
      <el-col :span="12">
        <el-form-item label="物料货主" prop="materialOwnerId">
          <company-select
            v-model="form.materialOwnerId"
            placeholder="请选择物料货主"
            @company-change="handleMaterialOwnerChange"
          />
        </el-form-item>
      </el-col>
      <el-col :span="12">
        <el-form-item label="业务日期" prop="startDate">
          <el-date-picker
            v-model="businessDateRange"
            type="daterange"
            range-separator="至"
            start-placeholder="业务起始日期"
            end-placeholder="业务结束日期"
            value-format="yyyy-MM-dd"
            style="width: 100%;"
            @change="handleDateRangeChange"
          />
        </el-form-item>
      </el-col>
    </el-row>
    
    <el-form-item label="项目状态" prop="projectStatus">
      <el-radio-group v-model="form.projectStatus">
        <el-radio label="1">进行中</el-radio>
        <el-radio label="2">已完成</el-radio>
        <el-radio label="3">已暂停</el-radio>
      </el-radio-group>
    </el-form-item>
    
    <el-form-item label="备注" prop="remark">
      <el-input
        v-model="form.remark"
        type="textarea"
        :rows="3"
        placeholder="请输入备注"
      />
    </el-form-item>
  </div>
</template>

<script>
export default {
  name: "BasicInfoForm",
  props: {
    form: {
      type: Object,
      required: true
    },
    rules: {
      type: Object,
      default: () => ({})
    }
  },
  computed: {
    // 业务日期范围计算属性
    businessDateRange: {
      get() {
        if (this.form.startDate && this.form.endDate) {
          return [this.form.startDate, this.form.endDate];
        } else if (this.form.startDate) {
          return [this.form.startDate, ''];
        }
        return null;
      },
      set(value) {
        if (value && Array.isArray(value) && value.length === 2) {
          this.form.startDate = value[0] || null;
          this.form.endDate = value[1] || null;
        } else {
          this.form.startDate = null;
          this.form.endDate = null;
        }
      }
    }
  },
  mounted() {
    console.log('BasicInfoForm mounted', this.form);
  },
  methods: {
    // 验证表单
    validate() {
      return this.$parent.$refs.form.validateField([
        'projectCode',
        'projectName', 
        'companyId',
        'containerOwnerId',
        'materialOwnerId',
        'startDate',
        'endDate',
        'projectStatus'
      ]);
    },
    /** 所属公司变更 */
    handleCompanyChange(company) {
      console.log('所属公司变更:', company);
      this.$emit('company-change', company);
    },
    /** 器具货主变更 */
    handleContainerOwnerChange(company) {
      console.log('器具货主变更:', company);
      this.$emit('container-owner-change', company);
    },
    /** 物料货主变更 */
    handleMaterialOwnerChange(company) {
      console.log('物料货主变更:', company);
      this.$emit('material-owner-change', company);
    },
    /** 业务日期范围变更 */
    handleDateRangeChange(value) {
      if (value && Array.isArray(value) && value.length === 2) {
        this.form.startDate = value[0];
        this.form.endDate = value[1];
      } else {
        this.form.startDate = null;
        this.form.endDate = null;
      }
      console.log('业务日期变更:', { startDate: this.form.startDate, endDate: this.form.endDate });
    }
  }
};
</script>

<style scoped>
.basic-info-form {
  padding: 10px 0;
}
</style> 